<template>
  <div class="adminDefault">
    <!-- 搜索区域 -->
    <el-form class="adminDefault_nav" ref="dataForm">
      <el-button class="add" type="primary" size="medium" v-if="button1" style @click="creat">添加一条</el-button>
    </el-form>
    <el-table :data="adminList" style="width: 100%" :border="true" :highlight-current-row="true">
      <el-table-column label="管理员ID" align="center" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.admin_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="管理员名字" align="center" width="140">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.user_name }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="角色" align="center" width="250">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.role_name }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="电话号码" align="center" width="200">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.phone }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{scope.row.reg_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="medium" v-if="button2" type="success" @click="UserEdit(scope.row)">编辑</el-button>
          <el-button size="medium" v-if="button4" type="warning" @click="updata(scope.row)">重置密码</el-button>
          <el-button size="medium" v-if="button3" type="danger" @click="UserDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改一条 -->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="管理员ID:" v-if="aaa">
          <span>{{temp.admin_id}}</span>
        </el-form-item>
        <el-form-item label="名字:">
          <el-input v-model="temp.user_name" />
        </el-form-item>
        <el-form-item label="角色:">
          <el-select v-model="role_id_name" placeholder>
            <el-option
              v-for="item in options"
              :key="item.role_id"
              :label="item.role_name"
              :value="item.role_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="temp.phone" ref="phoneNums" @blur="phoneNum" />
        </el-form-item>
        <el-form-item label="密码:" v-if="eee">
          <el-input type="password" v-model="temp.user_pass"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateData" v-if="bbb">更新</el-button>
        <el-button type="primary" @click="creatData" v-if="ccc">新增</el-button>
      </div>
    </el-dialog>
    <!-- 确认删除 -->
    <el-dialog :visible.sync="deleteDataFrom" width="30%">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px">
        <span>确定删除这一条吗？</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDataFrom = false">取消</el-button>
        <el-button type="primary" @click="deleteData">确定删除</el-button>
      </div>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog :visible.sync="adminPass">
      <el-form
        ref="dataForm"
        :model="adminData"
        :rules="rules"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
        class="fromData"
      >
        <el-form-item label="用户名:">
          <span>{{admin_name}}</span>
        </el-form-item>
        <el-form-item label="新密码:">
          <el-input placeholder="请输入新密码" v-model="adminData.user_pass" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adminPass = false">取消</el-button>
        <el-button type="primary" @click="updateAgree">更改</el-button>
      </div>
    </el-dialog>
    <!-- 分页器 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-col>
  </div>
</template>
<script>
import request from "@/utils/request";
import { Message, popconfirm } from "element-ui";
import { getToken, getAccount, getButtonpermsStr } from "@/utils/auth";
export default {
  data() {
    return {
      adminPass: false,
      adminList: [],
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageNum: 1, //总数页数
      total: 0,
      phoneNums: "",
      search: "",
      password: "",
      aaa: false, //（增加修改）表单ID显示
      bbb: true, // （增加修改）表单更新按钮显示
      ccc: true, // （增加修改）表单新增按钮显示
      eee: true, //密码框显示
      ggg: false, //删除弹窗
      dialogFormVisible: false,
      deleteDataFrom: false,
      role_ids: "",
      admin_name: "",
      adminData: {
        user_pass: "",
        token: getToken(),
        account_type: getAccount(),
        admin_id: 0
      },
      options: [],
      button1: false,
      button2: false,
      button3: false,
      button4: false,
      role_id_name:"",
      temp: {
        user_name: "",
        role_name: "",
        phone: "",
        reg_time: "",
        role_id: 1,
        token: getToken(),
        user_pass: "",
        admin_id: ""
      },
      rules: {},
      buttonpermsStr: getButtonpermsStr()
    };
  },
  mounted() {
    this.getAdminList();
    this.getList();
   
    if (this.buttonpermsStr !== undefined) {
      if (this.buttonpermsStr.indexOf(15) > -1) {
        this.button1 = true;
      }
      if (this.buttonpermsStr.indexOf(16) > -1) {
        this.button2 = true;
      }
      if (this.buttonpermsStr.indexOf(17) > -1) {
        this.button3 = true;
      }
      if (this.buttonpermsStr.indexOf(167) > -1) {
        this.button4 = true;
      }
    }
  },
  methods: {
   
    //删除
    UserDelete(row) {
      this.deleteDataFrom = true;
      this.temp = {
        token: getToken(),
        admin_id: row.admin_id,
        account_type: getAccount()
      };
    },
    //修改
    UserEdit(row) {
      this.temp = {
        user_name: row.user_name,
        phone: row.phone,
        role_id: row.role_id,
        token: getToken(),
        admin_id: row.admin_id,
        account_type: getAccount()
      };
      this.dialogFormVisible = true;
      this.aaa = true;
      this.bbb = true;
      this.ccc = false;
      this.ddd = true;
      this.eee = false;
    },
    //新增
    creat() {
      this.dialogFormVisible = true;
      this.aaa = false;
      this.ccc = true;
      this.bbb = false;
      this.eee = true;
      this.temp = {
        user_name: "",
        phone: "",
        role_id: "",
        token: getToken(),
        account_type: getAccount(),
        user_pass: ""
      };
    },
    //确认修改
    updateData() {
        if(this.role_id_name.constructor === Object){
        this.temp.role_id = this.role_id_name.role_id
      }else{
        this.temp.role_id = this.role_id_name
      }
      return request({
        url: "/v3/admin/accounts/update",
        method: "post",
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then((res) => {
        this.dialogFormVisible = false;
        this.$router.go(0); //刷新页面
      });
    },
    //确认新增
    creatData() {
      if(this.role_id_name.constructor === Object){
        this.temp.role_id = this.role_id_name.role_id
      }else{
        this.temp.role_id = this.role_id_name
      }
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          return request({
            url: "/v3/admin/accounts/insert",
            method: "post",
            headers: {
              account_type: getAccount()
            },
            data: this.temp
          }).then(res => {
            this.dialogFormVisible = false;
            this.$router.go(0); //刷新页面
          });
        }
      });
    },
    //确定删除当前行的Admin
    deleteData() {
      return request({
        url: "/v3/admin/accounts/delete",
        method: "post",
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        this.deleteDataFrom = false;
        this.$router.go(0); //刷新页面
        return res;
      });
    },
    //获取列表
    getAdminList() {
      return request({
        url: "/v3/admin/accounts/list",
        method: "post",
        headers: {
          account_type: getAccount()
        },
        data: {
          current_page: this.currentPage,
          page_size: this.pagesize
        }
      }).then(res => {
        this.currentPage = res.current_page;
        this.pageNum = res.pages;
        this.total = res.total_record;
        var admins = res.admins;
        this.adminList = res.admins;
      });
    },
     //重置密码
    updata(row) {
      this.adminPass = true;
      this.admin_name = row.user_name;
      this.adminData.admin_id = row.admin_id;
    },
    //确认重置
    updateAgree() {
      if (!this.adminData.user_pass) {
        Message({
          message: "密码不能为空",
          type: "error",
          duration: 1 * 1000
        });
      } else if (this.adminData.user_pass.length < 6) {
        Message({
          message: "密码最少六位",
          type: "error",
          duration: 1 * 1000
        });
      } else {
        return request({
          url: "/v3/admin/accounts/resetting/pass",
          method: "post",
          headers: {
            account_type: getAccount()
          },
          data: this.adminData
        }).then(res => {
          this.adminPass = false;
           this.$router.go(0); //刷新页面
          Message({
            message: "密码重置成功",
            type: "success",
            duration: 3 * 1000
          });
        });
       
      }
    },
    //当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize;
      this.getAdminList();
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      this.getAdminList();
    },
    //手机号验证
    phoneNum() {
      var pattern = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      var str = this.$refs["phoneNums"].value;
      if (pattern.test(str) !== true) {
        Message({
          message: "手机号格式不正确",
          type: "error",
          duration: 2 * 1000
        });
      }
    },
    //获取角色
    getList() {
      return request({
        url: "/v3/admin/role/list",
        method: "post",
        headers: {
          account_type: getAccount()
        },
        data: {}
      }).then(res => {
        this.options = res.roles;
         this.role_id_name = this.options[0];
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.adminDefault {
  margin-top: 55px;
  overflow: hidden;
  .adminDefault_nav {
    margin: 10px;
  }
}
</style>